<template>
	<view class="content">
		<headerbox :cixitype="cixi"></headerbox>
		<view class="pages">
			<view class="card">
				<view class="card-body">
					<view class="display_space">
						<view class="label_title">提现数额</view>
						<view class="btns" @click="goSwichPageTow('/pages/user/transaction_history')">查看记录</view>
					</view>
					<view class="display_space" style="height: 52rpx;">
						<view class="text1">MY积分余额</view>
						<view>RMB {{userinfos.money}}</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-body">
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex:5;">最低金额</view>
						<view class="label_title" style="flex: 5;">{{setting.min_tikuan}}</view>
					</view>
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex: 5;">服务费</view>
						<view class="label_title" style="flex: 5;">RMB 0</view>
					</view>
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex: 5;">兑换率</view>
						<view class="label_title" style="flex: 5;">{{setting.tx_usdt}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="card">
				<view class="card-body">
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex:8;">人民币余额</view>
						<view class="label_title" style="flex: 2;">0</view>
					</view>
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex: 8;">费用</view>
						<view class="label_title" style="flex:2;">0</view>
					</view>
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex: 8;">收费后金额</view>
						<view class="label_title" style="flex: 2;">0</view>
					</view>
					<view class="display_space1" style="border-bottom:1rpx solid #dee2e6;padding: 15rpx 0;">
						<view class="" style="flex: 8">转换后金额</view>
						<view class="label_title" style="flex: 2;">0</view>
					</view>
				</view>
			</view> -->
			<view class="card">
				<view class="card-body" style="padding-top: 60rpx;padding-bottom: 60rpx;">

					<view class="row">
						<view class="display_space1" style="margin-bottom: 30rpx;">预计获得 {{shijijine}} USDT</view>
						<view class="fromitem">
							<input class="input" type="text" v-model="money" @input="jisuan()" placeholder="人民币金额" />
							<!-- <view class="label" v-show="is_money">人民币金额</view> -->
							<view class="label21">必须</view>
						</view>
						<!-- 	<view class="convert">兑换率 : 7.30</view>
						<view class="convert">保险积分 123 = USDT 16.85</view>
						<view class="ammont">
							<view class="d-flex">
								<view class="items">¥2360</view>
								<view class="items">¥5960</view>
								<view class="items">¥11860</view>
								<view class="items">¥17760</view>
								<view class="items">¥23660</view>
								<view class="items">¥35460</view>
							</view>
						</view> -->
						<view class="fromitem" style="background-color: #E9ECEF;border-radius: 20rpx;">
							<input class="input" type="text" v-model="tradeID" disabled="true" placeholder="接收方USDT钱包地址(TRC20)" />
							<!-- <view class="label">交易ID后六位</view> -->
						</view>
						<view class="fromitem">
							<input class="input" :type="isshow?'text':'password'" v-model="tradeID2" placeholder="支付密码" @focus="focus1()"
								@blur="blur1()" style="padding-left: 80rpx;padding-top: 20rpx;padding-bottom: 20rpx;" />
							<view class="label" v-show="is_money">支付密码</view>
							<view class="label3"><svg t="1731553696198" class="icon" viewBox="0 0 1024 1024"
									version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4313" width="15" height="15">
									<path
										d="M385.150849 385.662338l-128.895105 0 0-150.377622q0-49.102897 19.436563-91.556444t53.706294-74.677323 80.815185-50.637363 101.786214-18.413586q49.102897 0 94.625375 18.413586t80.815185 50.637363 56.263736 74.677323 20.971029 91.556444l0 150.377622-123.78022 0 0-121.734266q0-64.447552-35.804196-99.74026t-97.182817-35.292707q-55.240759 0-88.999001 35.292707t-33.758242 99.74026l0 121.734266zM826.053946 447.040959q27.62038 0 47.568432 19.948052t19.948052 47.568432l0 317.122877q0 27.62038-9.718282 51.66034t-26.597403 41.942058-39.896104 28.131868-50.637363 10.22977l-516.603397 0q-27.62038 0-50.125874-10.22977t-38.361638-27.108891-24.551449-39.384615-8.695305-48.07992l0-324.283716q0-27.62038 19.436563-47.568432t47.056943-19.948052l61.378621 0 128.895105 0 255.744256 0 123.78022 0 61.378621 0z"
										p-id="4314" fill="#707070"></path>
								</svg></view>
							<view class="label2" >

								<svg t="1731554150292" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6304" width="20" height="20" v-if="isshow" @click="qiehuan(1)">
									<path
										d="M512 274C303.3 274 64 526 64 526s239.3 252 448 252 448-252 448-252-239.3-252-448-252z m0 420c-92.7 0-168-75.2-168-168 0-92.7 75.3-168 168-168 92.8 0 168 75.3 168 168 0 92.8-75.2 168-168 168z m0-56c-61.8 0-112-50.2-112-112s50.2-112 112-112 112 50.2 112 112-50.2 112-112 112z"
										fill="#707070" p-id="6305"></path>
								</svg>
								<svg t="1731554188128" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6574" width="20" height="20" v-if="!isshow" @click="qiehuan(2)">
									<path
										d="M705.8 331.7l199-230.6L863 64 653.4 306.7c-46.7-19.5-94.8-32.1-141.4-32.1-208.7 0-448 252.3-448 252.3s106 111.7 238.4 186.5L121.6 922.8l41.9 37.2 190.2-220.4c51.9 23.7 106 39.5 158.3 39.5 208.7 0 448-252.3 448-252.3S845.5 406.2 705.8 331.7zM344 526.9c0-92.9 75.3-168.2 168-168.2 28.7 0 55.7 7.2 79.4 19.9l-38 44c-12.8-5.1-26.7-7.9-41.3-7.9-61.8 0-112 50.3-112 112.1 0 20.4 5.5 39.5 15 56l-38 44C356.3 599 344 564.4 344 526.9z m168 168.2c-35.1 0-67.7-10.8-94.6-29.2l37-42.8c16.8 10.2 36.6 16 57.6 16 61.8 0 112-50.3 112-112.1 0-26.9-9.5-51.6-25.3-71l37-42.8C663.2 443 680 483 680 526.9c0 92.8-75.2 168.2-168 168.2z"
										fill="#707070" p-id="6575"></path>
								</svg>
							</view>
						</view>
						<view class="buttons" @click="submit()">立即提现</view>
					</view>
				</view>
			</view>
			<view class="card card1">
				<view class="card-body">
					<view class="d-flex1">
						<view class="" style="color: #664d03;font-size: 40rpx;font-weight: bold;">
							风险免责声明
						</view>
						<!-- <image class="tishi" src="../../static/timg/tishi.png" mode=""></image> -->
						<view class="texts">
							<view style="margin-bottom: 10rpx;">1) 单次提现最低金额为{{setting.min_tikuan}} RMB</view>
					
							
							2) 请提供正确的TRC20 USDT地址，以免造成资产损失
						</view>
						<!-- <view class="close"></view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="footer-bar" :class="cixi ? '':'footer-bar-detached'">
			<view class="fbitem" @click="goSwichPage('/pages/index/index')">
				<view class="image">
					<image src="../../static/timg/shouye.png" mode=""></image>
				</view>
				<view class="text">首页</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/contract/contract')">
				<view class="image">
					<image src="../../static/timg/heyue.png" mode=""></image>
				</view>
				<view class="text">合约</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/user/assets')">
				<view class="image">
					<image src="../../static/timg/zichan.png" mode=""></image>
				</view>
				<view class="text">资产</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/user/claim')">
				<view class="image">
					<image src="../../static/timg/suopei.png" mode=""></image>
				</view>
				<view class="text">索赔</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerbox from '@/pages/header.vue'
	import { getuserinfo,drawing,sysconfig } from '../../api/api.js'
	export default {
		components: {
			headerbox
		},
		data() {
			return {
				cixi: false,
				money: '',
				tradeID: '',
				tradeID2:'',
				is_money: false,
				isshow:false,
				
				userinfos:[],
				setting:[],
				
				shijijine:0
			}
		},
		onLoad() {
			this.getuserinfofc()
			this.getsysconfig()
		},
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.cixi = true
			} else {
				this.cixi = false
			}
		},
		methods: {
			qiehuan(t){
				this.isshow=!this.isshow
			},
			focus1() {
				console.log('聚焦')
				this.is_money = true
			},
			blur1() {
				console.log('市郊')
				this.is_money = false
			},
			jisuan(){
				let nummoney = Number(this.money)
				this.shijijine = (nummoney / this.setting.tx_usdt).toFixed(2)
			},
			getuserinfofc(){
				let datas = {
					type:1
				}
				getuserinfo(datas).then(res => {
					if(res.data.status.errorCode == 0){
						this.userinfos = res.data.data.member
						this.tradeID = res.data.data.member.usdt_address
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getsysconfig(){
				let datas = {
					type:1
				}
				sysconfig(datas).then(res => {
					if(res.data.status.errorCode == 0){
						this.setting = res.data.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			submit(){
				if(this.tradeID == ''){
					uni.showToast({
						title: '请输入钱包地址',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.money == ''){
					uni.showToast({
						title: '请输入提款数量',
						icon:'error',
						duration: 2000
					});
					return false
				}
				if(this.tradeID2 == ''){
					uni.showToast({
						title: '请输入支付密码',
						icon:'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					bank_name:this.tradeID,
					money:this.money,
					qk_pwd:this.tradeID2,
					name:'',
					bank_card:'',
					type:1
				}
				drawing(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000,
							success() {
								this.money = ''
								this.tradeID2 = ''
								// uni.navigateTo({
								// 	url:'/pages/transRecord/tixian'
								// })
							}
						});
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goSwichPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			goSwichPageTow(page) {
				uni.navigateTo({
					url: page + '?isSelType=1'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f7;
		color: #747474 !important;
	}

	.pages {
		padding-top: calc(calc(110rpx + 60rpx) + env(safe-area-inset-top));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	.card {
		width: 94%;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		word-wrap: break-word;
		margin-bottom: 30rpx;
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, .35) 0px 30px 60px -30px, rgba(0, 0, 0, .35) 0px -2px 6px 0px inset;
	}

	.card1 {
		background-color: #fff3cd !important;
	}

	.card-body {
		z-index: 3;
		flex: 1 1 auto;
		padding: 40rpx;
	}

	.display_space1 {
		font-size: 26rpx;
		// font-weight: bold;
		color: #212529;
		margin-bottom: 4rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
	}

	.display_space {
		font-size: 26rpx;
		font-weight: bold;
		color: #2a2a2a;
		margin-bottom: 4rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.label_title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.btns {
		font-size: 22rpx;
		padding: 16rpx 26rpx;
		font-weight: 700;
		border-radius: 24rpx;
		box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.1);
		background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC) !important;
		color: #FFF !important;
		line-height: 1.5;
	}

	.text1 {
		font-size: 26rpx;
		color: #c5993a;
	}

	.color-highlight {
		background-color: #4A89DC;
		border-color: #4A89DC;
		color: #FFF !important;
		text-align: center;
		width: 100%;
		font-size: 26rpx;
		height: 74rpx;
		line-height: 74rpx;
		font-weight: 600;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}

	.row {
		width: 100%;
	}

	.my-3 {
		font-size: 22rpx;
		padding: 16rpx 26rpx;
		font-weight: 700;
		text-align: center;
		color: #fff;
		box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.1);
		background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
		line-height: 1.5;
		border-radius: 24rpx;
		margin-bottom: 40rpx;
	}

	.rowtype {
		width: 100%;
		text-align: center;
		line-height: 48rpx;
		font-size: 28rpx;
		color: #747474 !important;
	}

	.erweima {
		width: 512rpx;
		height: 512rpx;
		display: block;
		margin: 0 auto;
	}

	.addr {
		text-align: center;
		line-height: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.addrcopy {
		background: #3c9948;
		margin: 0 auto;
		margin-bottom: 40rpx;
		padding: 0 16rpx;
		border-radius: 16rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-weight: 700;
		font-size: 24rpx;
		color: #FFF;
		width: fit-content;
	}

	.fromitem {
		position: relative;
		margin-bottom: 40rpx;
	}

	.input {
		width: 100%;
		height: 106rpx;
		line-height: 102rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.07) !important;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		outline: 0;
		color: #000;
	}

	.label {
		position: absolute;
		top: 10rpx;
		height: 20rpx;
		line-height: 20rpx;
		left: 80rpx;
		font-size: 22rpx;
		text-transform: uppercase;
		font-family: "Nunito", sans-serif;
		font-weight: 700;
		transition: all 250ms ease;
		padding-left: 2px !important;
		padding-right: 5px !important;
		color: #B8B8B8;
		// transform: translateX(80rpx) !important;
		// margin-left: -64rpx !important;
	}
	.label21{
		position: absolute;
		top: 42rpx;
		height: 20rpx;
		line-height: 20rpx;
		right: 0;
		font-size: 20rpx;
		text-transform: uppercase;
		font-family: "Nunito", sans-serif;
		// font-weight: 700;
		transition: all 250ms ease;
		padding-left: 2px !important;
		padding-right: 5px !important;
		color: #B8B8B8;
		// transform: translateX(80rpx) !important;
		// margin-left: -64rpx !important;
	}
	.label2 {
		position: absolute;
		top: 35rpx;
		height: 20rpx;
		line-height: 20rpx;
		right: 0;
		font-size: 20rpx;
		text-transform: uppercase;
		font-family: "Nunito", sans-serif;
		// font-weight: 700;
		transition: all 250ms ease;
		padding-left: 2px !important;
		padding-right: 5px !important;
		color: #B8B8B8;
		// transform: translateX(80rpx) !important;
		// margin-left: -64rpx !important;
	}

	.label3 {
		position: absolute;
		top: 38rpx;
		height: 20rpx;
		line-height: 20rpx;
		left: 20rpx;
		font-size: 20rpx;
		text-transform: uppercase;
		font-family: "Nunito", sans-serif;
		// font-weight: 700;
		transition: all 250ms ease;
		padding-left: 2px !important;
		padding-right: 5px !important;
		color: #B8B8B8;
		// transform: translateX(80rpx) !important;
		// margin-left: -64rpx !important;
	}

	.convert {
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
		color: #1b1b1b;
	}

	.ammont {
		padding-top: 20rpx;
		margin-bottom: 40rpx;
	}

	.d-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.d-flex .items:nth-child(-n+3) {
		margin-bottom: 40rpx;
	}

	.items {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 35rpx;
		border: solid 2rpx #eaeaea;
		background-color: #fff;
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
		text-align: center;
	}

	.buttons {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 700 !important;
		padding: 24rpx 36rpx;
		box-shadow: 0 10rpx 28rpx 0 rgba(0, 0, 0, 0.1);
		background-color: #4A89DC !important;
		color: #FFF !important;
		border-radius: 20rpx !important;
		margin-top: 60rpx;
	}

	.d-flex1 {
		// display: flex;
		align-items: center;
	}

	.tishi {
		width: 66rpx;
		height: 66rpx;
	}

	.texts {
		flex: 1;
		font-size: 28rpx;
		// line-height: 36rpx;
		color: #747474 !important;
		// padding-left: 40rpx;
		// padding-right: 20rpx;
		font-weight: 500;
		padding: 20rpx 0;
	}

	.close {
		width: 22rpx;
		height: 22rpx;
		background: transparent url('../../static/timg/guanbi.svg') center / 22rpx auto no-repeat;
		opacity: 0.2 !important;
	}

	.footer-bar {
		background-color: rgba(255, 255, 255, 0.95);
		padding: 0px 20rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 98;
		backdrop-filter: blur(20rpx);
		display: flex;
		text-align: center;
		transition: all 250ms ease;
		height: calc(120rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.04);
	}

	.footer-bar.footer-bar-detached {
		border-radius: 40rpx;
		left: 20rpx !important;
		right: 20rpx !important;
		bottom: 30rpx !important;
		box-shadow: 0 0px 30rpx 0 rgba(0, 0, 0, 0.1) !important;
		height: 120rpx !important;
	}

	.fbitem {
		color: #818181;
		position: relative;
		flex: 1 1 auto;
		padding-top: 24rpx;

		.image {
			height: 48rpx;
			margin-top: -4rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.text {
			height: 48rpx;
			margin-top: -6rpx;
			font-size: 24rpx;
			opacity: 0.7;
			color: #818181;
		}
	}
</style>